import React, { Component } from 'react';
import Dialog from '../components/Dialog';

export default class ShowDialog extends Component {
    constructor () {
        super();
        this.state = {
            visiable: false,
            username: '',
            userage: '',
            editusername: '',
            edituserage: ''
        }
    }

    changeVisiable = () => {
        this.setState({
            visiable: !this.state.visiable
        })
    }
    confirm = () => {
        this.setState({
            visiable: !this.state.visiable,
            username: this.state.editusername,
            userage: this.state.edituserage
        })
    }
    cancel = () => {
        this.setState({
            visiable: !this.state.visiable,
            editusername: this.state.username,
            edituserage: this.state.userage
        })
    }
    setVar(value, varType) {
        this.setState({
            [varType]: value
        })
    }
    render() {
        return (
            <>
                <div>
                    <button onClick={() => { this.changeVisiable() }}>弹窗</button>
                </div>
                <Dialog title={'你好'} visiable={this.state.visiable} confirm={this.confirm} cancel={this.cancel}>
                    <div>
                        <span>姓名：</span><input value={this.state.editusername} onChange={(e) => { this.setVar(e.target.value, 'editusername') }} />
                        <span>年龄：</span><input value={this.state.edituserage} onChange={(e) => { this.setVar(e.target.value, 'edituserage') }} />
                    </div>
                </Dialog>
                {this.state.username}今年{this.state.userage}
            </>
        )
    }
}
